<template>
  <div>
      <div class="commentWrapper">
          <div class="meta">
              <img :src="commentItem.user.head_img" alt="">
              <div class="info">
                  <div class="name">{{commentItem.user.nickname}}</div>
                  <div class="time">2小时前</div>
              </div>
              <div class="btnReply" @click="reply">
                  回复
              </div>
          </div>
          <commentFloor v-if="commentItem.parent" :floorItem="commentItem.parent" :parentLength="parentLength" @reply="reply"/>
          <div class="commentContent">
          {{commentItem.content}}
          </div>
      </div>
  </div>
</template>

<script>
import commentFloor from './commentFloor'
export default {
    props: ['commentItem'],
    components: {
        commentFloor
    },
    computed:{
        parentLength() {
            return this.countParent(0,this.commentItem);
        }
    },
    methods:{
        // 创建2个形参接收传入的实参
        countParent(num,obj){
            // 判断当前传入的对象有没有parent，有的话num加1，并把当前的parent对象传入函数，作为下一轮的递归判断有没有parent，，实现递归没有的话，就返回num，停止调用
            if(obj.parent){
                return this.countParent(num+1,obj.parent);
            }else{
                // console.log(num)
                return num
            }
        },
        reply(data){
             // 如果是这个组件自己触发的事件
            // 那么 data 就是事件对象,不存在 id
            // 如果这个事件是从楼层里面传出来的
            // 就会带上 data.id

            // 判断如果有底层传出来的 data.id
            // 我就原封 不动往外传,
            // 不然,我就穿自己的 id
            if(data.id){
                this.$emit('reply',data);
            }else{
                // 判断是不是直接评论文章的，而不是回复用户的
                this.$emit('reply',{id:this.commentItem.id});
            }
        }
    }

}
</script>

<style lang="less" scoped>
.commentWrapper{
    padding: 5.556vw 2.778vw;
    border-bottom: 1px solid #eee;
    font-size: 3.889vw;
    .meta{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 2.778vw;
        img{
            width: 9.722vw;
            height: 9.722vw;
            object-fit: cover;
            border-radius: 50%;
        }
        .info{
            flex: 1;
            font-size: 3.889vw;
            padding-left: 2.778vw;
            .time{
                font-size: 3.333vw;
                color: #9d9d9d;
            }
        }
        .btnReply{
            padding-right: 1.389vw;
            font-size: 3.333vw;
            color:#9d9d9d;
        }
    }
    .commentContent{
         margin-top: 2.778vw;
    }
}
</style>